Ext.define('Lms.rms.TroubleStatisticsPanel',{
	extend : 'Ext.panel.Panel',
	initComponent : function(){
		Ext.apply(this,{
			id : 'TroubleStatisticsPanel',
			layout : 'border',
			title : LocaleUtil.getMessage('rms.menu.faultChart'),
			borad : false,
			items : [
			    this.getTroubleHistoryGrid(),
//			    this.getTroubleStatisticsChart()
			    this.getChartPanel()
			]
		});
		this.callParent(arguments);
	},
	
	getTroubleHistoryGrid : function(){
		Ext.define('TroubleHistoryModel', {
	        extend: 'Ext.data.Model',	        
	        fields: ['createStrDate','recoverStrDate', 'faultCode', 'pcName']
	    });
		this.troubleHistoryStore = Ext.create('Ext.data.Store',{
			model : 'TroubleHistoryModel',
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : 'fault/pageList.do',
				reader : {
					type : 'json',
					root : 'list',
	                totalProperty: 'totalCount'
				}
			}      
		});
		this.troubleHistoryGrid = Ext.create('Ext.grid.Panel',{
			region : 'center',
			height  : '60%',
			store : this.troubleHistoryStore,
			border : false,
			viewConfig : Common.viewConfig(true),
			bbar: Common.pagingToolBar(this.troubleHistoryStore,25),
			columnLines: true,
			columns : [
			    {text : LocaleUtil.getMessage('rms.label.faultDate'),dataIndex : 'createStrDate', width : 120},
			    {text : LocaleUtil.getMessage('rms.label.recoverDate'),dataIndex : 'recoverStrDate', width : 120},
			    {text : LocaleUtil.getMessage('rms.label.faultContent'),dataIndex : 'faultCode', renderer : Common.getStateName},
			    {text : LocaleUtil.getMessage('rms.label.faultSystem'),dataIndex : 'pcName', flex :1}
			]
		});
		return this.troubleHistoryGrid;
	},
	
	getChartPanel : function(){
		return Ext.create('widget.panel',{
			region : 'south',
			height  : '40%',
			items : [this.getTroubleStatisticsChart()],
			tbar : [{
					xtype : 'tbtext',
					text : '<img src="images/icon/chart_curve.png" align="absmiddle"/> Chart'
				},'->',{
					xtype : 'radio',
					name : 'cycle',
					checked : true,
					inputValue : 'DAILY',
					boxLabel : LocaleUtil.getMessage('rms.label.daily'),
					listeners : {
						scope : this,
						focus : this.onChangeRadio
					}
				},{
					xtype : 'radio',
					name : 'cycle',
					inputValue : 'WEEKLY',
					boxLabel : LocaleUtil.getMessage('rms.label.weekly'),
					listeners : {
						scope : this,
						focus : this.onChangeRadio
					}
				},{
					xtype : 'radio',
					name : 'cycle',
					inputValue : 'MONTHLY',
					boxLabel : LocaleUtil.getMessage('rms.label.monthly'),
					listeners : {
						scope : this,
						focus : this.onChangeRadio
					}
				}
			]		
		});
	},
	
	onChangeRadio : function( radio, newValue, oldValue, eOpts ){
		this.chartStore.load({
			params : {
				countType : radio.inputValue
			}
		});
	},
	
	getTroubleStatisticsChart : function(){
		this.chartStore = Ext.create('Ext.data.JsonStore', {
	        fields: ['name', 'cnt'],
	        proxy : {
				type : 'ajax',
				url : 'fault/getCount.do',
				reader : {
					type : 'json'
				}
			}      
	    });
		this.chartStore.load({
			params : {
				countType : 'DAILY'
			}
		});
		return Ext.create('Ext.chart.Chart',{
			xtype : 'chart',
			width : 820,			
			height : 250,
			animate: true,
//            shadow: true,
            store: this.chartStore,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['cnt'],
                title: false,
                grid: true,
                label: {
                    font: '12px helvetica,arial,verdana,sans-serif'
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: false,
                grid: true,
                label: {
                    font: '12px helvetica,arial,verdana,sans-serif'
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
//                gutter: 80,
                xField: 'name',
                yField: ['cnt'],
//                style: {
//                    fill: '#18428E',
//                    stroke: '#18428E',
//                    'stroke-width': 3
//                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#18428E',
                    stroke: '#18428E'
                }
            }]
		});
	}
});